<template>
  <div style="height: 100%; position: relative">
    <el-drawer
      :title="title"
      :visible.sync="show_dialog"
      direction="rtl"
      size="80%"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content" ref="content">
        <el-form
          :model="form"
          :rules="rules"
          v-if="show_dialog"
          ref="editDrawer"
        >
          <el-form-item
            label="商家名称:"
            :label-width="formLabelWidth"
            prop="MerchantName"
          >
            <el-select
              v-model="form.store_name"
              filterable
              placeholder="请选择"
              @change="selectChange($event)"
            >
              <el-option
                v-for="item in storesList"
                :key="item.store_id"
                :label="item.store_name"
                :value="`${item.store_id},${item.store_name}`"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="购买金额:"
            :label-width="formLabelWidth"
            prop="purchase_amount"
          >
            <el-input v-model="form.purchase_amount"></el-input>
          </el-form-item>
          <el-form-item
            label="购买时长(小时):"
            :label-width="formLabelWidth"
            prop="purchase_duration"
          >
            <el-input v-model="form.purchase_duration"></el-input>
          </el-form-item>
          <el-form-item
            label="剩余时长(小时):"
            :label-width="formLabelWidth"
            prop="surplus_duration"
          >
            <el-input v-model="form.surplus_duration"></el-input>
          </el-form-item>
          <el-form-item
            label="起止时间:"
            :label-width="formLabelWidth"
            prop="addTime"
          >
            <el-date-picker
              v-model="form.addTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="预警号码:"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="备注:" :label-width="formLabelWidth" prop="note">
            <el-input v-model="form.note"></el-input>
          </el-form-item>
          <el-form-item
            label="状态:"
            prop="contract_status"
            :label-width="formLabelWidth"
          >
            <el-switch
              v-if="form.contract_status === 'Executing'"
              disabled
              v-model="form.contract_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="Executing"
              inactive-value="Close"
              active-text="执行中"
              inactive-text="关闭"
            ></el-switch>
            <el-switch
              v-else
              v-model="form.contract_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="Open"
              inactive-value="Close"
              active-text="开启"
              inactive-text="关闭"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button
          type="primary"
          @click="handleClose"
          :loading="loading"
          v-show="type !== 'show'"
          >{{ loading ? "提交中 ..." : "确 定" }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util";
export default {
  props: ["dialog"],
  data() {
    var checkTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择起止时间"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    return {
      loading: false,
      formLabelWidth: "180px",
      show_dialog: false, //弹窗显示
      title: "新增",
      form: {
        store_id: "",
        store_name: "",
        mobile: "",
        purchase_amount: "",
        purchase_duration: "",
        surplus_duration: "",
        addTime: "",
        // purchase_time: "",
        // end_time: "",
        note: "",
        contract_status: "Close",
        // contract_status_name:''
      },
      rules: {
        store_name: [{ required: true, message: "商家不能为空" }],
        purchase_amount: [{ required: true, message: "购买数量不能为空" }],
        purchase_duration: [
          { required: true, message: "购买时长不能为空", trigger: "blur" },
        ],
        surplus_duration: [{ required: true, message: "剩余时长不能为空" }],
        // purchase_time: [
        //     { required: true, message: '购买数量不能为空' }
        // ],
        // end_time: [
        //     { required: true, message: '剩余数量不能为空' }
        // ],
        addTime: [{ required: true, validator: checkTime }],
        // mobile: [
        //     { required: true, message: '预警号码不能为空' }
        // ],
        // note: [
        //     { required: true, message: '' }
        // ],
        contract_status: [{ required: true }],
      },
      type: "",
      row: "",
      Services: "", //服务类型
      storesList: [],
    };
  },
  created() {
    this.default_data();
  },
  methods: {
    default_data() {
      //供应商
      this.getStores();
    },
    getStores() {
      this.$http
        .post("/admin/dataService/index.php?act=merchantSet&op=getStores")
        .then((res) => {
          if (res.code == 1) {
            this.storesList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    show_dialog_fn(type, row) {
      this.type = type;
      this.show_dialog = true;
      if (type === "add") {
        this.form = {
          // store_id: "",
          store_name: "",
          mobile: "",
          purchase_amount: "",
          purchase_duration: "",
          surplus_duration: "",
          addTime: "",
          note: "",
          contract_status: "",
        };
      } else if (type === "edit") {
        this.title = "编辑";
        this.row = row;
        this.getItemDetail(row.id);
      }
    },
    cancelForm() {
      this.loading = false;
      this.show_dialog = false;
      clearTimeout(this.timer);
    },
    handleClose() {
      let {
        store_name,
        store_id,
        mobile,
        purchase_amount,
        purchase_duration,
        surplus_duration,
        addTime,
        // purchase_time,
        // end_time,
        note,
        contract_status,
      } = this.form;
      let findFn = (arr, key, value) => {
        return arr.find((item) => item[key] == value);
      };
      let data = {
        store_name,
        store_id,
        mobile,
        purchase_amount,
        purchase_duration: parseInt(purchase_duration * 3600),
        surplus_duration: parseInt(surplus_duration * 3600),
        purchase_time: addTime[0],
        end_time: addTime[1],
        note,
        contract_status,
        contract_status_name: contract_status == "Open" ? "开启" : "关闭",
      };
      this.$refs.editDrawer.validate((valid) => {
        if (valid) {
          if (this.type === "edit") {
            data.id = this.row.id;
            if (this.form.contract_status === "Executing") {
              data.contract_status = this.form.contract_status;
              data.contract_status_name = this.form.contract_status_name;
            }
            this.editItemDetail(data);
          } else if (this.type === "add") {
            this.addItemDetail(data);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getItemDetail(id) {
      this.$http
        .post(
          `/admin/dataService/index.php?act=qualityIntelligent&op=getContractById`,
          { id }
        )
        .then((res) => {
          if (res.code != 1) {
            this.$message.warning(res.msg);
            this.show_dialog = false;
            return;
          }
          //处理时间
          let time1 = res.data.purchase_time;
          let time2 = res.data.end_time;
          if (time1) {
            time1 = dateFormatter("YYYY-MM-DD", time1);
          }
          if (time2) {
            time2 = dateFormatter("YYYY-MM-DD", time2);
          }

          res.data.purchase_duration = (
            res.data.purchase_duration / 3600
          ).toFixed(2);
          res.data.surplus_duration = (
            res.data.surplus_duration / 3600
          ).toFixed(2);
          res.data.addTime = [time1, time2];
          this.form = res.data;
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    addItemDetail(data) {
      this.$http
        .post(
          `/admin/dataService/index.php?act=qualityIntelligent&op=addContract`,
          data
        )
        .then((res) => {
          if (res && res.code == 1) {
            this.show_dialog = false;
            this.$parent.getListData();
            this.$message.success(res.msg);
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    editItemDetail(data) {
      this.$http
        .post(
          `/admin/dataService/index.php?act=qualityIntelligent&op=alterContract`,
          data
        )
        .then((res) => {
          if (res.code == 1) {
            this.show_dialog = false;
            this.$message.success(res.msg);
            this.$parent.getListData();
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    selectChange(val) {
      let [value, label] = val.split(",");
      console.log(val);
      this.form.store_name = label;
      this.form.store_id = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  // width: 560px;
  padding-left: 10px;
}

.el-select /deep/.el-input {
  width: 360px;
}
.plantTable /deep/.el-input {
  width: auto;
}
form /deep/.el-input {
  width: 360px;
}

.demo-drawer__content {
  position: absolute;
  top: 0;
  bottom: 60px;
  width: 100%;
  overflow-y: auto;
}

/deep/.el-drawer__body {
  position: absolute;
  top: 77px;
  bottom: 0;
  width: 100%;
  overflow: auto;
  padding-bottom: 60px;
}

.demo-drawer__footer {
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.row_line {
  border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
  display: flex;
  align-items: center;
}
</style>
